// 粉丝互动页面
<style lang="less" scoped>
    .fans{align-items: normal;
        .aside{
            background-color: #ffffff;
            width: 240px;
            // height: 100%;
            .el-menu{
                border: none;
            }
            .active-menu{
                border-left:4px solid #ffffff;
                height: 52px;
                i{
                    margin-right: 18px;
                }
                // margin: 16px 0;
            }
            .active{
                border-left:4px solid #409eff
            }
            .active:after{
                content: "";
                position: absolute;
                color: #409eff;
                display: block;
                top: 50%;
                right: 24px;
                border-top: 1.5px solid #409eff;
                border-right: 1.5px solid #409eff;
                width: 6px;
                height: 6px;
                margin-top: -3px;
                transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                -o-transform: rotate(45deg);
            }
            li{
                height: 26px;
                line-height: 26px;
                text-align: left;
                padding: 13px 0px;
                border-bottom: 1px solid #fff;
            }
            /deep/li:hover{
                background-color: #f8f8f8 !important;
            }
        }
        .main{height: 100%;
            background-color: #f8f8f8;
            padding: 0;
        }
    }
</style><template>
    <div class="fans page-view box-left">
        <!--左侧菜单-->
        <el-aside width="240px" class="aside">
            <el-menu background-color="#fff" text-color="#666" active-text-color="#409eff" :default-active="activeMenu" @select="openMenu">
                <el-menu-item index="addfans" :class="['active-menu',{'active':activeMenu==='addfans'}]">
                    <i class="el-icon-circle-plus-outline"></i>
                    <span slot="title">增粉</span>
                </el-menu-item>
                <el-menu-item index="comments" :class="['active-menu',{'active':activeMenu==='comments'}]">
                    <i class="el-icon-edit-outline"></i>
                    <span slot="title">评论</span>
                </el-menu-item>
                <el-menu-item index="interactive" :class="['active-menu',{'active':activeMenu==='interactive'}]">
                    <i class="el-icon-user"></i>
                    <span slot="title">互动用户</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <!--右侧路由-->
        <el-main class="main">
            <el-scrollbar>
                <router-view/>
            </el-scrollbar>
        </el-main>
    </div>
</template>

<script>
export default {
    name: 'fans',
    data() {
        return {
            activeMenu:'addfans'
        }
    },
    mounted(){
        const locActiveMenu = sessionStorage.getItem('fansActiveMenu');
        if(locActiveMenu){
            this.activeMenu = locActiveMenu;
        }else{
            sessionStorage.setItem('fansActiveMenu',this.activeMenu);
        }
    },
    methods: {
        openMenu(key, keyPath) {
            console.log(key, keyPath);
            sessionStorage.setItem('fansActiveMenu',key);
            if(this.activeMenu === key){
                window.location.reload();
            }else{
                this.activeMenu = key;
                this.$router.push({name:key});
            }
        }
    }
}
</script>
